<template>
  <div class="sys-dept-camera">
    <div class="tree">
      <el-input
        v-model="filterText"
        placeholder="输入关键字进行过滤"
        clearable
        size="mini"
        style="margin-bottom: 10px;"
        @input="filterTextChange"
      />
      <el-tree
        ref="tree"
        class="tree-box"
        default-expand-all
        :data="treeData"
        :filter-node-method="filterNode"
        @node-click="handleNodeClick"
      />
    </div>
    <div class="list">
      <h3 v-show="sltName">{{ sltName }} - 监控列表</h3>
      <el-table v-loading="pointTableLoading" :data="tableData" style="width: 100%" border>
        <el-table-column align="center" prop="pointName" label="点位名称" />
        <!--        <el-table-column align="center" label="点位对应UE场景内点位">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{ scope.row.cameraPoiId ? pointLabelMap[scope.row.cameraPoiId] : '&#45;&#45;' }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column width="" align="center" label="监控设备一级类型">
          <template slot-scope="scope">
            <span>{{ scope.row.cameraType | filterEnumCameraType }}</span>
          </template>
        </el-table-column>
        <el-table-column width="" align="center" label="监控设备二级类型">
          <template slot-scope="scope">
            <span>{{ scope.row.cameraMiniType | filterEnumVideoCameraMiniType }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="aiTypes" label="算法类型" />
        <el-table-column align="center" prop="pointStatus" label="点位状态" />
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <!--            <el-button type="text" size="small" @click="checkRow(scope.row)">查看</el-button>-->
            <el-button v-has-permission="['point_edit']" type="text" size="small" @click="editRow(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="pageNo"
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="tableDataInit"
      />
    </div>
    <!-- 查看算法弹窗 -->
    <el-dialog title="查看算法" :visible.sync="checkOnOff" width="60%">
      <el-table v-loading="algorithmTableLoading" :data="algorithmData" style="width: 100%" border>
        <el-table-column align="center" prop="algorithmScene.name" label="算法场景名称" />
        <el-table-column align="center" prop="algorithmScene.type" label="算法场景类型" />
        <el-table-column align="center" prop="algorithmScene.desc" label="算法场景描述" />
        <el-table-column align="center" prop="algorithmAbility.name" label="算法能力名称" />
        <el-table-column align="center" prop="algorithmAbility.type" label="算法能力类型" />
        <el-table-column align="center" label="算法能力状态">
          <template slot-scope="scope">
            {{ scope.row.algorithmAbility.enabled ? '开启' : '关闭' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button v-has-permission="['algorithm_edit']" type="text" size="small" @click="editAlgorithmRow(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="checkOnOff = false">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 编辑点位信息弹窗 -->
    <el-dialog title="编辑点位信息" :visible.sync="editOnOff" width="30%">
      <el-form ref="ruleFormPoint" :model="editPointForm" label-width="200px" class="demo-ruleForm">
        <el-form-item label="监控设备一级类型">
          <common-select v-model="editPointForm.cameraType" name="EnumCameraType" placetext="请选择一级类型" />
        </el-form-item>
        <el-form-item label="监控设备二级类型">
          <common-select v-model="editPointForm.cameraMiniType" name="EnumVideoCameraMiniType" placetext="请选择二级类型" />
        </el-form-item>
        <!--        <el-form-item label="点位PoiId" prop="cameraPoiId">-->
        <!--          <el-select v-model="editPointForm.cameraPoiId" placeholder="请选择配置类型" clearable>-->
        <!--            <el-option-group v-for="group in pointList" :key="group.label" :label="group.label">-->
        <!--              <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value" />-->
        <!--            </el-option-group>-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editOnOff = false">取 消</el-button>
        <el-button type="primary" @click="submitPointForm">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑算法配置弹窗 -->
    <el-dialog title="编辑算法配置" :visible.sync="editAlgorithmOnOff" width="1500px" top="20px">
      <el-table :data="[{ ...saveAlgorithmInfo, ...savePointRow, sltName }]" style="width: 100%" border>
        <el-table-column align="center" prop="pointId" label="点位id" />
        <el-table-column align="center" prop="pointName" label="点位名称" />
        <el-table-column align="center" prop="sltName" label="所属营业厅" />
        <el-table-column align="center" prop="aiTypes" label="算法报警类型" />
      </el-table>
      <h4>报警关闭设置</h4>
      <el-form ref="ruleForm" :model="editAlgorithmForm" :rules="rules" label-width="200px" class="demo-ruleForm">
        <el-form-item label="配置类型" prop="configType">
          <el-select v-model="editAlgorithmForm.configType" placeholder="请选择配置类型">
            <el-option label="每天" :value="1" />
            <el-option label="每周" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="跳过节假日" required>
          <el-switch v-model="editAlgorithmForm.skipHolidays" active-text="是" inactive-text="否" />
        </el-form-item>
        <el-form-item label="按季节配置" required>
          <el-switch v-model="editAlgorithmForm.seasonStatus" active-text="是" inactive-text="否" />
        </el-form-item>
        <el-form-item
          v-if="editAlgorithmForm.configType === 2"
          :label="editAlgorithmForm.seasonStatus ? '夏季每周配置' : '每周配置'"
          prop="effectiveTime"
        >
          <PickWeekDate v-model="editAlgorithmForm.effectiveTime" />
        </el-form-item>
        <el-form-item
          v-if="editAlgorithmForm.seasonStatus && editAlgorithmForm.configType === 2"
          label="冬季每周配置"
          prop="winterEffectiveTime"
        >
          <PickWeekDate v-model="editAlgorithmForm.winterEffectiveTime" />
        </el-form-item>
        <el-form-item
          v-if="editAlgorithmForm.configType === 1"
          :label="editAlgorithmForm.seasonStatus ? '夏季开始时间' : '开始时间'"
          prop="beginTime"
        >
          <el-time-picker v-model="editAlgorithmForm.beginTime" value-format="HH:mm:ss" />
        </el-form-item>
        <el-form-item
          v-if="editAlgorithmForm.configType === 1"
          :label="editAlgorithmForm.seasonStatus ? '夏季结束时间' : '结束时间'"
          prop="endTime"
        >
          <el-time-picker v-model="editAlgorithmForm.endTime" value-format="HH:mm:ss" />
        </el-form-item>
        <el-form-item
          v-if="editAlgorithmForm.seasonStatus && editAlgorithmForm.configType === 1"
          label="冬季开始时间"
          prop="winterBeginTime"
        >
          <el-time-picker v-model="editAlgorithmForm.winterBeginTime" value-format="HH:mm:ss" />
        </el-form-item>
        <el-form-item
          v-if="editAlgorithmForm.seasonStatus && editAlgorithmForm.configType === 1"
          label="冬季结束时间"
          prop="winterEndTime"
        >
          <el-time-picker v-model="editAlgorithmForm.winterEndTime" value-format="HH:mm:ss" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editAlgorithmOnOff = false">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="submitForm">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
import CommonSelect from '@/components/wejoy/CommonSelect'


// 固定的监控点位对ue场景内的映射表
const pointList = [{
  label: '赣州沙河气化站',
  options: [
    { value: 'c0-e1', label: '储备站正门' },
    { value: 'c0-e2', label: '储备站雨棚' },
    { value: 'c0-e3', label: '储备站小路' },
    { value: 'c0-e4', label: '储罐区' },
    { value: 'c0-e5', label: '中控室' },
    { value: 'c0-e6', label: '储备站大门外' },
    { value: 'c0-e7', label: '储备站大门内' },
    { value: 'c0-e8', label: 'LNG卸车云台' }
  ]
}, {
  label: '赣州沙河加气站',
  options: [
    { value: 'c5-e9', label: '收费大厅' },
    { value: 'c5-e10', label: '加气站路口' },
    { value: 'c5-e11', label: '加气站大门' },
    { value: 'c5-e12', label: '2号加气机' },
    { value: 'c5-e13', label: '4号加气机' },
    { value: 'c5-e14', label: '收费大厅' },
    { value: 'c5-e15', label: '1号公交加气机' },
    { value: 'c5-e16', label: '3号加气机' },
    { value: 'c5-e17', label: '洗车机' },
    { value: 'c5-e18', label: 'LNG充装' },
    { value: 'c5-e19', label: 'LNG储罐' },
    { value: 'c5-e20', label: '压缩机大门' },
    { value: 'c5-e21', label: '收费大门' },
    { value: 'c5-e22', label: '压缩机房' }
  ]
}, {
  label: '三十埠母站',
  options: [
    { value: 'c1-e1', label: '门站生产区南' },
    { value: 'c1-e2', label: '生产区北围墙' },
    { value: 'c1-e3', label: '门站撬区北' },
    { value: 'c1-e4', label: '母站进站大门加气平台' },
    { value: 'c1-e5', label: '门站LNG气罐区' },
    { value: 'c1-e6', label: '厂区消防通道小门' },
    { value: 'c1-e7', label: '生产区西围墙' },
    { value: 'c1-e8', label: '母站加气平台' },
    { value: 'c1-e9', label: '母站装卸区' },
    { value: 'c1-e10', label: '母站装卸区球机' },
    { value: 'c1-e11', label: '门站LNG' },
    { value: 'c1-e12', label: '母站撬区' },
    { value: 'c1-e13', label: '母站大门出口' },
    { value: 'c1-e14', label: '母站控制室' },
    { value: 'c1-e15', label: '母站控制室休息区' },
    { value: 'c1-e16', label: '母站干燥区' },
    { value: 'c1-e17', label: '母站南围墙和安徽瑞冉' },
    { value: 'c1-e18', label: '门站控制室' },
    { value: 'c1-e19', label: '生产区东小门围墙' },
    { value: 'c1-e20', label: '门站撬区南' },
    { value: 'c1-e21', label: '门站站控楼' }
  ]
}, {
  label: '九江牯牛岭气化站',
  options: [
    { value: 'c2-e1', label: '大门' },
    { value: 'c2-e2', label: '内墙' },
    { value: 'c2-e3', label: '内门' },
    { value: 'c2-e4', label: '气化区' },
    { value: 'c2-e5', label: '外围墙' },
    { value: 'c2-e6', label: '停车区' },
    { value: 'c2-e7', label: '加气区' },
    { value: 'c2-e8', label: '加气区' },
    { value: 'c2-e9', label: '气化区' },
    { value: 'c2-e10', label: '气化区' },
    { value: 'c2-e11', label: '储罐区' },
    { value: 'c2-e12', label: '仓库' },
    { value: 'c2-e13', label: '值班室' },
    { value: 'c2-e14', label: '围墙1' },
    { value: 'c2-e15', label: '门口' },
    { value: 'c2-e16', label: '氮气区' },
    { value: 'c2-e17', label: '生产区全景' },
    { value: 'c2-e18', label: '消防水泵房1' },
    { value: 'c2-e19', label: '消防水泵房2' },
    { value: 'c2-e20', label: '发电机房' },
    { value: 'c2-e21', label: '储罐1' },
    { value: 'c2-e22', label: '储罐2' }
  ]
}, {
  label: '求雨岭',
  options: [
    { value: 'c3-e1', label: '求雨岭门站大门' },
    { value: 'c3-e2', label: '求雨岭门站西围墙' },
    { value: 'c3-e3', label: '锅炉房南围墙' },
    { value: 'c3-e4', label: '高压进站区南围墙' },
    { value: 'c3-e5', label: '高压进站区南围墙' },
    { value: 'c3-e6', label: '生产区南围墙' },
    { value: 'c3-e7', label: '生产区东围墙' },
    { value: 'c3-e8', label: '加臭机旁球机' },
    { value: 'c3-e9', label: '生产区东围墙' },
    { value: 'c3-e10', label: '生产区东围墙' },
    { value: 'c3-e11', label: '生产区北围墙' },
    { value: 'c3-e12', label: '检管撬北围墙' },
    { value: 'c3-e13', label: '办公楼北围墙' },
    { value: 'c3-e14', label: '办公楼西围墙' },
    { value: 'c3-e15', label: '办公楼机柜室' },
    { value: 'c3-e16', label: '办公楼外' },
    { value: 'c3-e17', label: '办公楼楼顶球机' },
    { value: 'c3-e18', label: '生厂区进门球机' }

  ]
}, {
  label: '留仙洞站',
  options: [
    { value: 'c4-e1', label: '北墙1' },
    { value: 'c4-e2', label: '北墙2' },
    { value: 'c4-e3', label: '北墙3' },
    { value: 'c4-e4', label: '西墙1' },
    { value: 'c4-e5', label: '生产区枪机' },
    { value: 'c4-e6', label: '西墙2' },
    { value: 'c4-e7', label: '南墙1' },
    { value: 'c4-e8', label: '南墙2' },
    { value: 'c4-e9', label: '南墙3' },
    { value: 'c4-e10', label: '小门' },
    { value: 'c4-e11', label: '站区大门' },
    { value: 'c4-e12', label: '东墙1' },
    { value: 'c4-e13', label: '东墙2' },
    { value: 'c4-e14', label: '生产区（球机）' },
    { value: 'c4-e15', label: '停车场（球机）' },
    { value: 'c4-e16', label: '生产区门口（球机）' }
  ]
}]

const pointLabelMap = {}
pointList.forEach(item => {
  item.options.forEach(child => {
    pointLabelMap[child.value] = `${item.label} - ${child.label}`
  })
})
export default {
  name: 'SysDeptCameraList',
  components: {
    PickWeekDate: () => import('@/components/PickWeekDate/PickWeekDate.vue'),
    CommonSelect
  },
  data() {
    return {
      pageNo: 1,
      total: 0,
      pointLabelMap,
      pointList,
      submitLoading: false,
      checkOnOff: false,
      editOnOff: false,
      editAlgorithmOnOff: false,
      filterText: '',
      pointTableLoading: false,
      algorithmTableLoading: false,
      sltName: '',
      saveTreeNodeInfo: {},
      treeData: [],
      tableData: [],
      algorithmData: [],
      savePointRow: {},
      saveAlgorithmInfo: {},
      editPointForm: {
        cameraPoiId: '',
        cameraType: '',
        cameraMiniType: ''
      },
      editAlgorithmForm: {
        skipHolidays: false,
        seasonStatus: false,
        configType: 1,
        beginTime: '',
        endTime: '',
        effectiveTime: [],
        winterBeginTime: '',
        winterEndTime: '',
        winterEffectiveTime: []
      },
      rules: {
        configType: [
          { required: true, message: '请选择配置类型', trigger: 'change' }
        ],
        beginTime: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        endTime: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        effectiveTime: [
          { required: true, message: '请选择每周配置', trigger: 'change' }
        ],
        winterBeginTime: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        winterEndTime: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        winterEffectiveTime: [
          { required: true, message: '请选择冬季每周配置', trigger: 'change' }
        ]
      }
    };
  },
  created() {
    this.treeDataInit()
    this.registerFilter('EnumCameraType');
    this.registerFilter('EnumVideoCameraMiniType');
  },
  methods: {
    // 校验通过发送请求
    async ok() {
      try {
        this.submitLoading = true
        const params = {
          ...this.saveAlgorithmInfo,
          ...this.editAlgorithmForm
        }
        const option = { url: '/system/sysCarmeraConfig/setAlgorithmConfig', method: 'post', data: params }
        await request(option)
        this.submitLoading = false
        this.$message.success('提交成功')
        this.editAlgorithmOnOff = false
      } catch (error) {
        this.submitLoading = false
      }
    },
    // 校验通过发送请求
    async editPointOk() {
      try {
        this.submitPointLoading = true
        const params = {
          id: this.savePointRow.id,
          ...this.editPointForm
        }
        const option = { url: '/system/sysCamera/save', method: 'post', data: params }
        await request(option)
        this.submitPointLoading = false
        this.$message.success('提交成功')
        this.tableDataInit()
        this.editOnOff = false
      } catch (error) {
        this.submitPointLoading = false
      }
    },
    // 校验表单状态
    submitPointForm() {
      this.$refs['ruleFormPoint'].validate((valid) => {
        if (valid) {
          this.editPointOk()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 校验表单状态
    submitForm() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.ok()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 获取树结构数据方法
    async getAlgorithmInfo(row) {
      const params = {
        pointId: this.savePointRow.id,
        sceneType: row.algorithmScene.type,
        abilityType: row.algorithmAbility.type
      }
      const option = { url: '/system/sysCarmeraConfig/getAlgorithmConfig', method: 'post', data: params }
      const { data } = await request(option)
      this.saveAlgorithmInfo = data
      this.editAlgorithmForm.skipHolidays = data.skipHolidays ? data.skipHolidays : false
      this.editAlgorithmForm.seasonStatus = data.seasonStatus ? data.seasonStatus : false
      this.editAlgorithmForm.configType = data.configType ? data.configType : 1
      this.editAlgorithmForm.beginTime = data.beginTime ? data.beginTime : null
      this.editAlgorithmForm.endTime = data.endTime ? data.endTime : null
      this.editAlgorithmForm.effectiveTime = data.effectiveTime ? data.effectiveTime : []
      this.editAlgorithmForm.winterBeginTime = data.winterBeginTime ? data.winterBeginTime : null
      this.editAlgorithmForm.winterEndTime = data.winterEndTime ? data.winterEndTime : null
      this.editAlgorithmForm.winterEffectiveTime = data.winterEffectiveTime ? data.winterEffectiveTime : []
    },
    // 获取算法列表数据方法
    async algorithmDataInit(row) {
      try {
        this.algorithmTableLoading = true
        this.algorithmData = []
        const params = { pointId: row.id }
        const option = { url: '/system/sysCamera/getAlgorithm', method: 'post', data: params }
        const { data: { data }} = await request(option)
        this.algorithmData = data
        this.algorithmTableLoading = false
      } catch (error) {
        this.algorithmTableLoading = false
      }
    },
    // 编辑算法列数据
    editAlgorithmRow(row) {
      this.getAlgorithmInfo(row)
      this.editAlgorithmOnOff = true
    },
    // 查看列数据
    checkRow(row) {
      this.checkOnOff = true
      this.savePointRow = row
      this.algorithmDataInit(row)
    },
    // 编辑列数据
    editRow(row) {
      this.editOnOff = true
      this.savePointRow = row
      this.editPointForm.cameraPoiId = row.cameraPoiId
      this.editPointForm.cameraType = row.cameraType.toString()
      this.editPointForm.cameraMiniType = row.cameraMiniType.toString()
    },
    // 输入框变化时触发tree组件的搜索
    filterTextChange(val) {
      this.$refs.tree.filter(val);
    },
    // tree组件的搜索逻辑
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 获取树结构数据方法
    async treeDataInit() {
      const params = { parentId: '-1' }
      const option = { url: '/system/sysDept/getDepTreeList', method: 'post', data: params }
      const { data } = await request(option)
      this.treeData = data
      this.sltName = data && data[0] && data[0].label ? data[0].label : ''
    },
    // 获取点位列表方法
    async tableDataInit() {
      try {
        this.pointTableLoading = true
        const params = { depId: this.saveTreeNodeInfo.id, pageNo: this.pageNo, pageSize: 10 }
        const option = { url: '/system/sysCamera/getPageList', method: 'post', data: params }
        const { data: { rows = [], total = 0 }} = await request(option)
        this.total = total
        this.tableData = rows
        this.pointTableLoading = false
      } catch (error) {
        this.pointTableLoading = false
      }
    },
    // 节点点击事件，可以根据点击的节点更新列表数据
    handleNodeClick(data) {
      this.pageNo = 1
      this.total = 0
      this.sltName = data.label
      this.saveTreeNodeInfo = data
      this.tableDataInit()
    }
  }
};
</script>

<style scoped lang="scss">
.sys-dept-camera {
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh - 84px);
  display: flex;

  .tree {
    width: 15%;
    margin-right: 20px;
    padding-right: 20px;
    border-right: 1px solid #eee;
    display: flex;
    flex-direction: column;

    .tree-box {
      flex: 1;
      min-height: 0;
      overflow: auto;
    }
  }

  .list {
    flex: 1
  }
}
</style>
